<template>
  <div class="ChatList">
    <div class="addChat">
      <c-button type='primary' dashed @click="setCurrentChat('0')">
        添加对话
      </c-button>
    </div>
    <c-menu class="chatMenu" v-model:value="currentChat" :options="options" />
  </div>
</template>

<script setup lang='tsx'>
import ChatListAction from '~/components/Chat/ChatListAction/ChatListAction.vue';
import type { MenuMixedOption } from 'naive-ui/es/menu/src/interface';
const { currentChat, chatMap } = storeToRefs(chatStore())
const { setCurrentChat } = chatStore()
const options = computed(() => {
  return MapToArray<MenuMixedOption>(chatMap.value)?.flat().map((e) => {
    return {
      ...e,
      extra: () => {
        return currentChat.value === e.id ?
          <n-dialog-provider>
            <ChatListAction id={e.id as string} />
          </n-dialog-provider>
          : null
      },
    }
  })
})
</script>

<style lang="scss">
.ChatList {
  display: flex;
  flex-direction: column;
  background: $siderbar-bg;
  height: 100vh;

  .addChat {
    z-index: 3;

    padding: 20px;
    width: 100%;
    button {
      width: 100%;
    }

  }

  .chatMenu {
    flex: 1;
  }
}
</style>
